import { Suspense, lazy } from 'react';
import { Outlet } from 'react-router-dom';

import { SvgIcon } from '@/components/icon';
import { CircleLoading } from '@/components/loading';

import { AppRouteObject } from '#/router';

const ListPage = lazy(() => import(`@/pages/image/list`));
const CatePage = lazy(() => import('@/pages/image/cate'));
const UploadPage = lazy(() => import('@/pages/components/upload'));

const image: AppRouteObject = {
  order: 1,
  path: 'image',
  element: (
    <Suspense fallback={<CircleLoading />}>
      <Outlet />
    </Suspense>
  ),
  meta: {
    label: '图库管理',
    icon: <SvgIcon icon="ic-analysis" className="ant-menu-item-icon" size="24" />,
    key: '/image',
  },
  children: [
    {
      path: 'list',
      element: <ListPage />,
      meta: { label: '图库列表', key: '/image/list' },
    },
    {
      path: 'cate',
      element: <CatePage />,
      meta: { label: '图库分类', key: '/image/cate' },
    },
    {
      path: 'upload',
      element: <UploadPage />,
      meta: { label: '上传', key: '/image/upload', hideMenu: true },
    },
  ],
};

export default image;
